<template>
<div>
  <ul class="m-account-list" v-if="accountListData.length > 0">
    <li v-for="item in accountListData">
      <div class="list-item"
           :style="{ backgroundImage: `url(${item.imagebg})`}"
           v-link="item.nameline2 === '支付宝红包' ? { name: 'CustomPrice' } : { name:
           'AccountDaylist', params: {
           pid: item.pid } }">
        <div class="details" :style="{ backgroundImage: `url(${item.imageright})`}">
          <h3 class="brand" :style="{ backgroundImage: `url(${item.imageicon})`}">{{ item.nameline1 }}</h3>
          <h2 class="name">{{ item.nameline2 }}</h2>
          <h1 class="type">{{ item.nameline3 }}</h1>
        </div>
      </div>
    </li>
  </ul>
  <tip :is-show="showTip"></tip>
</div>
</template>
<script scoped>
  import _ from 'lodash'
  import Uid from '../assets/utils/uid.js'
  import api from '../assets/utils/api.js'
  import tip from './common/Tip.vue'
  export default {
    data () {
      return {
        showTip: false,
        title: '购买平台列表',
        accountListData: []
      }
    },
    components: {
      'tip': tip
    },
    created () {
      Uid.getUid().then(res => {
        const uid = res.uid
        const version = res.version
        // window.alert(uid, version)
        if (!_.isNil(uid) && !_.isNil(version) && version !== 'undefined') {
          api.apiCall('accountList', {
            uid: uid
          }).then(data => {
            if (_.isString(data.returncode)) data.returncode = _.parseInt(data.returncode)
            switch (data.returncode) {
              case 0:
                if (data.list.length > 0) {
                  this.accountListData = _(this.accountListData).concat(data.list).value()
                }
                break
              case -1:
                console.error('accountList接口返回错误：用户参数不正确')
            }
          })
        } else {
          this.showTip = true
        }
      }, () => {
        this.showTip = true
      })
    },
    ready () {
      // 更改页面标题
      document.title = this.title
    }
  }
</script>
